<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,,maximum=1.0,user-scalable=0" name="viewport" />
    <title>bootstrap后台开发</title>
    <link rel="stylesheet" type="text/css" href="mybootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <!-- 头部，导航栏 -->
    <nav class="navbar navbar-default navbar-fixed-top" id="header">
        <div class="container-fliud">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">统一流媒体服务器</a>
            </div>
        </div>
    </nav>
    <!-- 主体部分 -->
    <div class="container-fliud outermost">
        <div class="row outermost-row">
            <!-- 主体左侧，侧导航栏 -->
            <div class="col-sm-3 main-left">
                <ul class="nav">
                    <li class="active black">
                        <a href="#"><img src="img/5.png">编码流</a>
                    </li>
                    <li class="font">
                        <a href="#"><img src="img/18.png">流中转</a>
                    </li>
                    <li class="font">
                        <a href="#"><img src="img/19.png">点播（Vod）</a>
                    </li>
                    <li class="font">
                        <a href="#"><img src="img/6.png" width="24px">任务计划</a>
                    </li>
                    <li class="font">
                        <a href="#"><img src="img/20.png">安全管理</a>
                    </li>
                    <li class="font"><a href="#"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>状态监测</a></li>
                    <li class="font"><a href="#"><span class="glyphicon glyphicon-cog" 
                        aria-hidden="true"></span>高级配置</a></li>
                    <li class="font">
                        <a href="#"><img src="img/14.png">重启服务</a>
                    </li>
                    <li class="font" id="about"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>关于我们</a></li>
                </ul>
                <div id="left-bottom">
                    <button class="btn btn-lg" id="restart">重新启动</button>
                    <div id="time">最后一次启动时间:2013-01-21</div>
                </div>
            </div>
            <!-- 主体右侧 -->
            <div class="col-sm-9 col-sm-offset-3 main-right">
                <!-- 内容1，第一个表单 -->
                <div class="content1">
                    <form class="form-horizontal">
                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">全局访问策略</legend>
                            <!-- 第一行 -->
                            <div class="form-group">
                                <div class="checkbox col-sm-4">
                                    <label>
                                        <input type="checkbox"> 是否允许匿名访问
                                    </label>
                                </div>
                                <div class="checkbox col-sm-4">
                                    <label>
                                        <input type="checkbox"> 是否启用IP地址授权
                                    </label>
                                </div>
                                <div class="checkbox col-sm-4">
                                    <label>
                                        <input type="checkbox"> 是否启用防盗链
                                    </label>
                                </div>
                            </div>
                            <!-- 第二行 -->
                            <div class="form-group">
                                <div class="checkbox col-sm-4 ">
                                    <label>
                                        <input type="checkbox"> 是否启用DRM加密
                                    </label>
                                </div>
                                <div class="col-sm-8">
                                    <label for="max" class="col-sm-3 control-label">最大连接数:</label>
                                    <div class="col-sm-3">
                                        <input id="max" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <!-- 第三行 -->
                            <div class="form-group">
                                <div class="checkbox col-sm-12">
                                    <label>
                                        <input type="checkbox"> 是否启用采集端推送策略
                                    </label>
                                </div>
                            </div>
                            <!-- 第四行 -->
                            <div class="form-group">
                                <label for="area" class="col-sm-3  control-label">推送IP地址范围:</label>
                                <div class="col-sm-3">
                                    <input id="area" type="text" class="form-control">
                                </div>
                                <label class="sr-only control-label">text</label>
                                <div class="col-sm-3 col-sm-offset-1">
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <!-- 第五行 -->
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <p class="form-control-static">推送用户名</p>
                                </div>
                                <label for="name" class="col-sm-1 control-label" id="user-name">账号:</label>
                                <div class="col-sm-3">
                                    <input id="name" type="text" class="form-control">
                                </div>
                                <label for="num" class="col-sm-1 control-label" id="word">密码:</label>
                                <div class="col-sm-3">
                                    <input id="num" type="password" class="form-control">
                                </div>
                            </div>
                        </fieldset>
                        <!-- 第六行 -->
                        <div class="form-group">
                            <div class="col-sm-1 col-sm-offset-4">
                                <button type="submit" class="btn btn-default btn-sm" id="keep">
                                    保存
                                </button>
                            </div>
                            <div class="col-sm-1 col-sm-offset-1">
                                <button type="submit" class="btn btn-default btn-sm" id="cancel">
                                    取消
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 第二部分内容，第二个表单 -->
                <div class="content2">
                    <form class="form-horizontal">
                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">点播发布点</legend>
                            <!-- 第一行 -->
                            <div class="form-group">
                                <div class="col-sm-3">
                                    名称
                                </div>
                                <div class="col-sm-2">
                                    访问授权
                                </div>
                                <div class="col-sm-2">
                                    防盗链
                                </div>
                                <div class="col-sm-3">
                                    加密
                                </div>
                                <div class="col-sm-2">
                                    IP地址授权
                                </div>
                            </div>
                            <!-- 第二行 -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="checkbox col-sm-2">
                                        <label>
                                            <input type="checkbox">&nbsp;VOD1
                                        </label>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <button type="button" class="btn btn-default btn-sm" id="set1">设置</button>
                                    </div>
                                </div>
                            </div>
                            <!-- 第三行 -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="checkbox col-sm-2">
                                        <label>
                                            <input type="checkbox">&nbsp;VOD2
                                        </label>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <button type="button" class="btn btn-default btn-sm" id="set2">设置</button>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <!-- 第四行 -->
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-4">
                                    <button type="submit" class="btn btn-default btn-sm" id="add1">添加</button>
                                    <button type="submit" class="btn btn-default btn-sm" id="resive1">修改</button>
                                    <button type="submit" class="btn btn-default btn-sm" id="delete1">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 第三部分，第三个表单 -->
                <div class="content3">
                    <form class="form-horizontal">
                        <fieldset class="scheduler-border">
                            <legend class="scheduler-border">直播发布点</legend>
                            <!-- 第一行 -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-3">
                                        名称
                                    </div>
                                    <div class="col-sm-2">
                                        访问授权
                                    </div>
                                    <div class="col-sm-2">
                                        防盗链
                                    </div>
                                    <div class="col-sm-3">
                                        加密
                                    </div>
                                    <div class="col-sm-2">
                                        IP地址授权
                                    </div>
                                </div>
                            </div>
                            <!-- 第二行 -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="checkbox col-sm-2">
                                        <label>
                                            <input type="checkbox">&nbsp;VOD1
                                        </label>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <button type="button" class="btn btn-default btn-sm" id="set3">设置</button>
                                    </div>
                                </div>
                            </div>
                            <!-- 第三行 -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="checkbox col-sm-2 ">
                                        <label>
                                            <input type="checkbox">&nbsp;VOD2
                                        </label>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-default btn-xs">OFF</button>
                                            <button type="button" class="btn btn-default btn-xs">ON</button>
                                        </div>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <button type="button" class="btn btn-default btn-sm" id="set4">设置</button>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <!-- 第四行 -->
                        <div class="form-group">
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-4">
                                    <button type="submit" class="btn btn-default btn-sm" id="add2">添加</button>
                                    <button type="submit" class="btn btn-default btn-sm" id="resive2">修改</button>
                                    <button type="submit" class="btn btn-default btn-sm" id="delete2">删除</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 内容中心 -->
                <div id="help-center">
                    <div id="help1">
                        <div>帮助中心</div>
                    </div>
                    <div id="help2">帮助中心</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="container">
            <p>统一流媒体服务</p>
        </div>
    </footer>
</body>

</html>
